<template lang="">
    <div>
        <input v-model='left' />
        <select v-model='rule'>
            <option :value='item.value' v-for='(item,index) in arr' ::key="index" >{{item.name}}</option>
          
            
        </select>
        <!-- {{rule}} -->
        <input v-model='right' />
        {{num}}
        
        <button @click='hanshu'>=</button>
        <button @click='logoff'>注销</button>

    </div>
</template>
<script>
export default {
    data(){
        return {
             left:null,
             right:null,
             num:null,
             
             rule:'+',
              arr:[
               {
                name:'+',
                value:'+'
               },
               {
                name:'-',
                value:'-'
               },
               {
                name:'*',
                value:'*'
               },
               {
                name:'/',
                value:'/'
               },
              ]
        }
    },
    methods: {
        hanshu(){
           
             if(this.rule === '+'){
                this.num= Number(this.left) + Number(this.right)
             }
             if(this.rule === '-'){
                this.num= Number(this.left) - Number(this.right)
             }
             if(this.rule === '*'){
                this.num= Number(this.left) * Number(this.right)
             }
             if(this.rule === '/'){
                this.num= Number(this.left) / Number(this.right)
             } 

              if( ! this.left || ! this.right || ! this.rule ) {
                              alert('报错')
              } 
              console.log(this.left);
              
        },
        logoff (){
              this.$router.push('/login')
        }
    },
}
</script>
<style lang="">
    
</style>